<!--6月26-->
<template>
  <div style="padding: 20px; font-family: Arial; text-align: center;">
    <img :src="imageUrl" alt="心情圖片" style="width: 150px; margin-bottom: 20px;" />
    <h2>你今天感觉怎么样？</h2>
    <select v-model="mood">
      <option disabled value="">请选择心情</option>
      <option value="happy">开心</option>
      <option value="ok">还行</option>
      <option value="sad">难过</option>
    </select>
    <button @click="show = !show">
      {{ show ? '隐藏' : '显示' }}
    </button>
    <div v-show="show" style="margin-top: 20px;">
      <p v-if="mood === 'happy'">你看起来很开心！😊</p>
      <p v-else-if="mood === 'ok'">今天也还不错～ 😎</p>
      <p v-else-if="mood === 'sad'">希望你早点好起来 😢</p>
      <p v-else>请选择一个心情看看！</p>
    </div>
    <p :style="{ fontSize: mood === 'happy' ? '20px' : '16px' }">
      （如果你很开心，文字会变大哦）
    </p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const mood = ref('')
const show = ref(true)
const imageUrl = ref('src/emoji.png')
</script>